<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>工作站</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!-- 搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="workstationQuery" inline>
        <el-form-item label="工作站编码">
          <el-input v-model="workstationQuery.workstationCode" clearable/>
        </el-form-item>

        <el-form-item label="工作站名称">
          <el-input v-model="workstationQuery.workstationName" clearable/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="所在车间名称">
          <el-select v-model="workstationQuery.workShopId" style="width: 150px">
            <el-option v-for="workShop in workShops" :value="workShop.workShopId" :label="workShop.workShopName"/>
          </el-select>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="所属工序">
          <el-select v-model="workstationQuery.processId" style="width: 150px">
            <el-option v-for="process in procezz" :value="process.processId" :label="process.processName"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="loadWorkstations" type="primary"> <el-icon><Search /></el-icon>&nbsp搜索</el-button>
          <el-button @click="referWorkstations"> <el-icon><Refresh /></el-icon>&nbsp重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;padding: 0px 10px">
    <el-col :span="24">
      <el-button @click="toAddWorkstation" type="primary" plain><el-icon><Plus /></el-icon>新增</el-button>
      <el-button @click="toEdits" type="success" plain><el-icon><EditPen /></el-icon>修改</el-button>
      <el-button @click="toDeletes" type="danger" plain><el-icon><Delete /></el-icon>删除</el-button>
    </el-col>
  </el-row>

  <!-- 数据列表 -->
  <el-row style="margin: 10px 10px;padding:0px 15px;">
    <el-col :span="24">
      <el-table :data="workstations" border stripe ref="workstationTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="workstationCode" width="150px" label="工作站编码">
          <template #default="scope">
            <el-link @click="showDetail(scope.row.workstationId)" type="success">
              {{ scope.row.workstationCode }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="workstationName" label="工作站名称"/>
        <el-table-column prop="workstationAddress" label="工作站地址"/>
        <el-table-column prop="workShopName" label="所在车间名称"/>
        <el-table-column prop="processName" label="所属工序"/>
        <el-table-column prop="workstationStatus" label="是否启用">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.unitStatus == 1">是</el-tag>
            <el-tag type="danger" v-if="scope.row.unitStatus == 2">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"/>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-link @click="toEditWorkstation(scope.row.workstationId)" style="margin: 0px 5px" type="primary"><el-icon><EditPen /></el-icon>修改</el-link>
            <el-popconfirm width="200"
                           confirm-button-text="必须删"
                           cancel-button-text="点错了"
                           @confirm="deleteWorkstationById(scope.row.workstationId)"
                           title="您确定要删除这条数据吗？">
              <template  #reference>
                <el-link style="margin: 0px 5px" type="primary">
                  <el-icon><Delete /></el-icon>删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-footer>
    <!--  分页栏 -->
    <el-row :span="5" style="margin-left: 1020px">
      <el-col :span="1.5" style="color: dimgray;padding: 10px;margin-top: 5px">
        共 {{total}} 条
      </el-col>
      <el-col :span="2" style="padding: 10px">
        <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
      </el-col>
    </el-row>
  </el-footer>

  <!-- 新增弹窗组件 -->
  <workstationAdd @cancelWorkstationAdd="cancelWorkstationAdd"
           @add-complete="addWorkstationComplete"
           :is-show="addWinIsShow"
           style="margin-top: 100px"/>

  <!-- 编辑弹窗组件 -->
  <workstationEdit :workstation-id="editWorkstationId"
            @cancel-workstation-edit="cancelWorkstationEdit"
            @edit-complete="editComplete"
            style="margin-top: 30px"/>
  <!-- 详情子组件 -->
  <workstationDetail :workstation-id="detailWorkstationId"
                  @cancel-workstation-detail="cancelWorkstationDetail"
                  style="margin-top: 30px"/>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {ElMessage} from "element-plus";
import {ElMessageBox} from 'element-plus';
import processRequest from "@/api/process.js";
import workShopRequest from "@/api/workShop.js";
import workstationRequest from "@/api/workstation.js";
import workstationAdd from "@/views/md/workstation/workstation-add.vue";
import workstationEdit from "@/views/md/workstation/workstation-edit.vue";
import workstationDetail from "@/views/md/workstation/workstation-detail.vue";
// 封装搜索数据的对象
let workstationQuery = ref({})
// 查询的项目列表
let workstations = ref([]);
// 总条数，默认0
let total = ref(0);
// 当前页码，默认1
let curPage = ref(1);
let workstationTable = ref(null);

// 查询的单位列表
let procezz = ref([]);

// 查询的车间列表
let workShops = ref([]);


//新增窗口
let addWinIsShow = ref(false);

// 当前要编辑的分类的编号，默认是-1
let editWorkstationId = ref(-1);

/**
 * 工具栏新增工作站事件
 * @param workstation
 */
function toAddWorkstation(workstation){
  addWinIsShow.value = true;
}

/**
 * 新增工作站完成的监听事件
 */
function addWorkstationComplete(){
  cancelWorkstationAdd();
  loadWorkstations();
}

/**
 * 取消新增的事件
 */
function cancelWorkstationAdd(){
  addWinIsShow.value = false;
  loadWorkstations();
}

/**
 * 工具栏编辑按钮事件
 */
function toEdits(){
  let selectedRows = workstationTable.value.getSelectionRows();
  if(selectedRows.length > 1){
    ElMessage({
      type:"warning",
      message:"编辑只能编辑一条数据"
    });
  }else if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
  }else{
    toEditWorkstation(selectedRows[0].workstationId);
  }
}

/**
 * 工具栏批量删除按钮事件
 */
function toDeletes(){
  let selectedRows = workstationTable.value.getSelectionRows();
  if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
    return;
  }
  ElMessageBox.confirm(
      '您确定要删除选中的项目吗？',
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    let workstationIds = [];
    selectedRows.forEach(row=>{
      workstationIds.push(row.workstationId);
    })

    workstationRequest.deleteWorkstations(workstationIds,res=>{
      if(res.code == 200){
        ElMessage({
          type:"success",
          message:"成功删除[" + res.data + "]条数据"
        })
        loadWorkstations();
      }else{
        ElMessage({
          type:"warning",
          message:"删除失败"
        })
      }
    });
  }).catch(()=>{});
}

/**
 * 行级编辑按钮事件
 * @param workstation
 */
function toEditWorkstation(workstationId){
  editWorkstationId.value = workstationId;
}

/**
 * 行删除按钮事件
 * @param workstationId
 */
function deleteWorkstationById(workstationId) {
  workstationRequest.deleteWorkstationById(workstationId,res => {
    if (res.code === 200) {
      ElMessage.success('删除完成');
      loadWorkstations();
    }
  });
}

/**
 * 编辑完成的事件
 */
function editComplete(){
  // 更新数据表
  cancelWorkstationEdit();
  loadWorkstations();
}

/**
 * 编辑取消的事件
 */
function cancelWorkstationEdit(){
  // 将 editWorkstationId 修改为-1
  editWorkstationId.value = -1;
}

/**
 * 加载工作站列表
 */
function loadWorkstations() {
  // 调用API来查询项目列表
  workstationRequest.loadWorkstations(workstationQuery.value, curPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    total.value = res.data.total;
    // 将查询的列表赋值给 workstations
    workstations.value = res.data.list;
  })
}

/**
 * 重置按钮事件
 */
function referWorkstations(){
  workstationQuery.value.workstationCode = null;
  workstationQuery.value.workstationName = null;
  workstationQuery.value.workShopId = null;
  workstationQuery.value.processId = null;
  loadWorkstations();
}

// 分页事件
function changePage(value) {
  curPage.value = value;
  loadWorkstations();
}

// 详情的 workstationId
let detailWorkstationId = ref(-1);

/**
 * 行详情页面按钮事件
 * @param workstationId
 */
function showDetail(workstationId) {
  detailWorkstationId.value = workstationId;
}

/**
 * 详情取消的事件
 */
function cancelWorkstationDetail(){
  // 将 detailWorkstationId 修改为-1
  detailWorkstationId.value = -1;
  loadWorkstations();
}

onMounted(() => {
  loadWorkstations();
  // 加载工序对象
  processRequest.listAll(res => {
    // 将查询的列表赋值给 procezz
    procezz.value = res.data;
  })

  //加载工作站对象
  workShopRequest.ListWorkShops(res => {
    workShops.value = res.data;
  })
})
</script>

<style scoped>

</style>